<script setup lang="ts">
import { ref, onMounted,computed } from "vue";
import { Repo } from "./video_repo";
import { IconPark } from "@icon-park/vue-next/es/all";
import { onClickOutside } from "@vueuse/core";

const cur_repo=ref<Repo>()

const repo_routers=ref<Repo[]>([])

const has_sub_repo=computed(()=>cur_repo.value && cur_repo.value.sub_dir_names.length>0)
const has_video=computed(()=>cur_repo.value && cur_repo.value.videos.length>0)
const has_error=computed(()=>cur_repo.value && cur_repo.value.error)
const has_no_content=computed(()=>!has_sub_repo.value && !has_video.value && !has_error.value)

onMounted(async () => {
  cur_repo.value = await Repo.fetch_root_repo()
  repo_routers.value.push(cur_repo.value)
});

const enter_router_repo=(repo:Repo)=>{
    cur_repo.value=repo
    while (repo!=repo_routers.value.pop()?.parent) {
        
    }
}

const enter_sub_repo=async (repo_name:string)=>{
    cur_repo.value=await cur_repo.value!.get_sub_repo(repo_name)
    repo_routers.value.push(cur_repo.value)
}

const video_elem=ref<HTMLVideoElement>()

const video_url=ref<string>()
const show_video=ref(false)
const play_video=(video_name:string)=>{
    video_url.value=cur_repo.value?.make_video_url(video_name)
    show_video.value=true
}
const close_video=()=>{
    video_elem.value?.pause()
    video_url.value=''
    show_video.value=false
}
onClickOutside(video_elem,()=>{
    close_video()
})
</script>

<template>
  <div class="container">
    <div class="container-title reverse">
      <h1 class="label">Cinema</h1>
    </div>
    <div class="container-content">
        <div class="routers">
            <span 
            class="router-part" v-for="repo in repo_routers"
            @click="enter_router_repo(repo)">{{repo.name}}</span>
        </div>
        <div class="repo">
            <!-- <h2>{{repo?.name}}</h2> -->
            <div class="repo-card" v-if="has_no_content">
                <h3 class="reverse">Oops</h3>
                <p>Seems there is nothing there...</p>
            </div>
            <div class="sub-repos repo-card" v-if="has_sub_repo">
                <h3 class="reverse">Sub Repos</h3>
                <ul class="repo-list">
                    <li 
                    v-for="repo_name in cur_repo?.sub_dir_names"
                    @click="enter_sub_repo(repo_name)">📁{{repo_name}}</li>
                </ul>
            </div>
            <div class="repo-videos repo-card" v-if="has_video">
                <h3 class="reverse">Vidoes</h3>
                <ul class="repo-list">
                    <li 
                    v-for="video in cur_repo?.videos"
                    @click="play_video(video)">🎬{{video}}</li>
                </ul>
            </div>
            <div class="repo-card danger" v-if="has_error">
                <h3 class="reverse danger">Errors</h3>
                <p>{{cur_repo?.error}}</p>
            </div>
        </div>
    </div>
    <teleport to="body">
    <div 
    class="video-container"
    v-if="show_video" 
    >
        <video 
        :src="video_url" 
        type="video/mp4" 
        ref="video_elem" 
        controls 
        autoplay></video>
        <button class="close-btn" @click="close_video()">❌</button>
    </div>
    </teleport>
  </div>
</template>

<style scoped>
.container{
    width: 100%;

}
.container-content{
    width: 100%;
    display:grid;
    grid-template-rows: auto 1fr;
}
.routers{
    display: flex;
    flex-wrap: wrap;
    font-size: 24px;
    font-weight: 600;
}
.router-part::before{
    content: '/';
}
.router-part{
    text-decoration: underline;
}
.router-part:active{
    background-color: var(--font-color);
    color: var(--bg-color);
}
/* .router-part::after{
    content: '>';
} */

.repo{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr 1fr;
}
.repo-card{
    border: 1px solid ;
    height: 40vh;
    margin-top: 10px;

}
.repo-list{
    overflow-y: auto;
    height: calc(40vh - 30px);
}
.repo-list > li{
    margin-bottom: 5px;
}
.repo-list > li:active{
    background-color: var(--font-color);
    color: var(--bg-color);
}

.video-container{
    width:100vw;
    height: 100vh;
    background-color: #00000099;
    backdrop-filter: blur(10px);
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    place-items: center;
    place-content: center;
    gap: 10px;
}
.video-container video{
    max-width: 90%;
}
.close-btn{
    width: 30px;
    height: 30px;
    align-self: center;
    border-radius: 50%;
    background-color: transparent;
    color: aliceblue;
    border: none;
    font-size: 20px;
}
</style>
